<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Sort tests</h1>
    <div>
        <button class="sort">sort</button>
        <button class="shuffle">shuffle</button>
    </div>
    <br/>
    <!-- TODO this test could be automated -->
    <div id="sort">
        <a data-num="4" href="../photos/8083451788_552becfbc7_b.jpg" title="4">
            <img src="../photos/8083451788_552becfbc7_m.jpg" />
        </a>
        <a data-num="4" href="../photos/7948632554_01f6ae6b6f_b.jpg" title="4">
            <img src="../photos/7948632554_01f6ae6b6f_m.jpg" />
        </a>
        <a data-num="4" href="../photos/7302459122_19fa1d8223_b.jpg" title="4">
            <img src="../photos/7302459122_19fa1d8223_m.jpg" />
        </a>
        <a data-num="1" href="../photos/7222046648_5bf70e893a_b.jpg" title="1">
            <img src="../photos/7222046648_5bf70e893a_m.jpg" />
        </a>
        <a data-num="1" href="../photos/7002395006_29fdc85f7a_b.jpg" title="1">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" />
        </a>
        <a data-num="2" href="../photos/7062575651_b23918b11a_b.jpg" title="2">
            <img src="../photos/7062575651_b23918b11a_m.jpg" />
        </a>
        <a data-num="3" href="../photos/6841267340_855273fd7e_b.jpg" title="3">
            <img src="../photos/6841267340_855273fd7e_m.jpg" />
        </a>
        <a data-num="3" href="../photos/6958456697_e56a37bb5f_b.jpg" title="3">
            <img src="../photos/6958456697_e56a37bb5f_m.jpg" />
        </a>
        <a data-num="3" href="../photos/6791628438_affaa19e10_b.jpg" title="3">
            <img src="../photos/6791628438_affaa19e10_m.jpg" />
        </a>
        <a data-num="1" href="../photos/6916180091_9c9559e463_b.jpg" title="1">
            <img src="../photos/6916180091_9c9559e463_m.jpg" />
        </a>
        <a data-num="2" href="../photos/6880502467_d4b3c4b2a8_b.jpg" title="2">
            <img src="../photos/6880502467_d4b3c4b2a8_m.jpg" />
        </a>
        <a data-num="1" href="../photos/6876412479_6268c6e2aa_b.jpg" title="1">
            <img src="../photos/6876412479_6268c6e2aa_m.jpg" />
        </a>
        <a data-num="3" href="../photos/6840627709_92ed52fb41_b.jpg" title="3">
            <img src="../photos/6840627709_92ed52fb41_m.jpg" />
        </a>
        <a data-num="1" href="../photos/6812090617_5fd5bbdda0_b.jpg" title="1">
            <img src="../photos/6812090617_5fd5bbdda0_m.jpg" />
        </a>
        <a data-num="2" href="../photos/6806687375_07d2b7a1f9_b.jpg" title="2">
            <img src="../photos/6806687375_07d2b7a1f9_m.jpg" />
        </a>
        <a data-num="1" href="../photos/6798453217_72dea2d06e_b.jpg" title="1">
            <img src="../photos/6798453217_72dea2d06e_m.jpg" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../bower_components/colorbox/jquery.colorbox.js"></script>
    <script src="../../bower_components/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
        $('.sort').click(function () {
            $("#sort").justifiedGallery({
                sort: function (a, b) {
                    return $(a).data("num") - $(b).data("num");
                }
            });
        });

        $('.shuffle').click(function () {
            $("#sort").justifiedGallery({ sort: false, randomize: true });
        });

        $("#sort").justifiedGallery();
    </script>
</body>

</html>
